<!DOCTYPE html>
<html>
 <head> 
  <link rel="stylesheet" href="/bitStyle/css/bootstrap.min.css" type="text/css" /> 
  <title>会员注册</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> 
  <script src='/Public/js/jquery-1.7.2.min.js'></script>
  <script src='/Public/js/layer/layer.js'></script>
  <link rel="stylesheet" type="text/css" href="/Public/Home/style/member/css/style37ba.css" /> 
 </head> 
 <body class="login"> 
  <section class="content"> 
   <h1> REGISTRATION </h1> 
   <form>
   <div class="registration"> 
    <div class="line"> 
     <span id="Label1" style="color:Red;"></span> 
     <div class="left"> 
      <label> Name *: </label> 
      <p> (a nickname is possible) </p> 
     </div> 
     <div class="right"> 
      <input name="UE_account" type="text" id="txtfirst" /> 
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"> 
      <label> E-mail *: </label> 
      <p> (for example, example@gmail.com) </p> 
     </div> 
     <div class="right">
      <input name="UE_verMail" type="text" id="txtemail" />
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"> 
      <label> E-mail code*: </label> 
      <p> (Input mailbox verification code) </p> 
     </div> 
     <div class="right">
      <input name="email_code" type="text" id="email_code" style='width:80%' />
      <input type='button' onclick='time(this)' style='border: 1px solid #bfbfbf;background: #FFFFFF;padding: 5px 5px;font-size: 12px;float:right;width:20%' value='Send out'>
     </div> 
    </div>
    <div class="line"> 
     <div class="left"> 
      <label> Mobile phone number * : </label> 
      <p> (for example, +34616074756) </p> 
     </div> 
     <div class="right">
      <input name="UE_phone" type="text" id="phone" maxlength="17" data-required="1" />
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"> 
      <label> Password* : </label> 
      <p> (enter your password) </p> 
     </div> 
     <div class="right"> 
      <input name="UE_password" type="password" id="txtpassword" /> 
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"> 
      <label> Confirm Password* : </label> 
      <p> (re-enter your password) </p> 
     </div> 
     <div class="right"> 
      <input name="repwd" type="password" id="txtconfirm" />
      <br /> 
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"> 
      <label> Invite: </label> 
      <p> (It is optional. Fill this field in if someone invited you. Otherwise you may leave the field empty) </p> 
     </div> 
     <div class="right"> 
      <input name="txtinvite" type="text" id="txtinvite" value="{$Think.get.txtinvite}" /> 
     </div> 
    </div> 
    <div class="line" id="captcha-code-label"> 
     <div class="left"> 
      <label> Image code *: </label> 
      <p> Enter the code from the picture </p> 
     </div> 
     <div class="right">
      <input type="text" maxlength="6" id="captcha-input-field" name="captcha_code" />
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"></div> 
     <div class="right"> 
      <canvas id="reg-canvas" width="100" height="50" style="width: 200px;"></canvas> 
      <img id="imgCaptcha" src="{:U('Reg/verify')}" style="border-radius: 10px; border: 1px dashed #999999; height: 35px;color:black; width: 140px; float: right; margin-right: 10px; position: absolute;" /> 
      <img name="btnRefresh" id="btnRefresh"  onclick='getCode()' src="/Public/Home/style/member/img/Refresh-icon.png" style="float: right; width:35px;  " /> 
     </div> 
    </div> 
    <div class="line"> 
     <div class="left"></div> 
    </div>  
    <div class="line"> 
     <div class="left"></div> 
     <div class="right"> 
      <input type="button" name="Button2" value="REGISTER" id="Button2" onclick='reg()' /> 
     </div> 
    </div> 
   </div> 
   </form>
  </section> 
  <script type="text/javascript">
    function reg() {
        if ($("#txtfirst").val() == "") {
            layer.msg("请填写用户名");
            return false;
        } else if ($("#recommended").val() == "") {
            layer.msg("请填写推荐人");
            return false;
        }
        else if ($("#password").val() == "") {
            layer.msg("请填写密码");
            return false;
        }
        else if ($("#password").val() != $("#cpassword").val()) {
            layer.msg("两次密码不一致");
            return false;
        }
        
        else if ($("#phone").val() == "") {
            layer.msg("请填写手机号");
            return false;
        }
        if (!isMobile($("#phone").val())) {
            layer.msg("手机格式不正确");
            return false;
        }

       
        $.post("{:U('Reg/regadd')}", $("form").serialize(), function(data) { 
            if (data.status==1) {
            	layer.msg(data.info);
            	location.href= "{:U('Login/index')}";    
            } else { 
                alert(data.info);
            }},'json');
    }

    function isMobile(str) {
        var myreg = /^([0]?)(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
        return myreg.test(str);
    }

    function isEmail(str) {
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        return reg.test(str);
    }

    var wait = 60;

    function time(o) {       
        if ($("#txtemail").val() == "") {
            layer.msg("请填写邮箱");
            return false;
        }

        if (!isEmail($("#txtemail").val())) {
            layer.msg("邮箱格式不正确");
            return false;
        }
         if (wait == 60) {  
        	 sendEmail();
        }
        if (wait == 0) {
            o.removeAttribute("disabled");  
            o.value="Send out"; 
            wait = 60;  
        }else{
        	o.setAttribute("disabled", true);  
            o.value="again(" + wait + ")";  
            wait--;  
            setTimeout(function() {  
            	time(o)  
            },1000)
        }
    }

    function sendEmail(){
    	$.post("{:U('Reg/sendEmail')}", { email: $("#txtemail").val() }, function(msg) { 
        	layer.msg(msg.info); 
        	});
    } 
    function getCode(){
    	document.getElementById('imgCaptcha').src="{:U('Reg/verify')}?"+Math.random();	
    }

</script>   
 </body>
</html>